<template>
  <div>
    <el-card class="m-5">
      <el-form>
        <el-form ref="setmealFormRef" :model="setmealForm" :inline="true" :rules="rules" class="demo-form-inline">
          <el-form-item label="套餐名称" prop="name">
            <el-input style="width: 440px" v-model="setmealForm.name" placeholder="请输入套餐名称" clearable />
          </el-form-item>
          <el-form-item label="套餐分类" prop="categoryId">
            <el-select style="width: 440px" v-model="setmealForm.categoryId" clearable>
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="套餐价格" prop="price">
            <el-input style="width: 440px" v-model="setmealForm.price" placeholder="请输入套餐价格" clearable />
          </el-form-item>
        </el-form>
        <!-- 口味 -->
        <el-form-item label="套餐菜品">
          <setmealDish v-model="setmealForm.setmealDishes" />
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="套餐图片" prop="image">
          <Upload v-model="setmealForm.image" :upload="uploadFileAPI" />
        </el-form-item>
        <el-form-item label="套餐描述">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 10 }"
            v-model="setmealForm.description"
            placeholder="请输入套餐描述,最长200字"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSetmeal">{{ route.query.id ? "修改" : "添加" }}菜品</el-button>
          <el-button type="default" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import Upload from "../dish/component/upload.vue"
import { uploadFileAPI, getDishDetailAPI } from "@/api/dish"
import { getCategoryListAllAPI } from "@/api/category"
import { type FormInstance, ElMessage } from "element-plus"
import { useRouter, useRoute } from "vue-router"
import setmealDish from "./component/setmealDish.vue"
import { addSetmealAPI } from "@/api/setmeal"

// 全局路由
const router = useRouter()

// 页面路由
const route = useRoute()

// 套餐表单
const setmealForm = ref({
  name: "",
  categoryId: "",
  price: "",
  description: "",
  image: "",
  setmealDishes: []
})

// 套餐分类
const categoryList = ref<any[]>()

// 获取套餐分类
const getCategoryList = async () => {
  const res = await getCategoryListAllAPI(2)
  if (res.code === 1) {
    categoryList.value = res.data
  }
}

// 表单校验
const rules = {
  name: [
    {
      required: true,
      message: "请输入套餐名称",
      trigger: "blur"
    }
  ],
  categoryId: [
    {
      required: true,
      message: "请选择套餐分类",
      trigger: "change"
    }
  ],
  price: [
    {
      required: true,
      message: "请输入套餐价格",
      trigger: "blur"
    }
  ],
  image: [
    {
      required: true,
      message: "请上传套餐图片",
      trigger: "change"
    }
  ]
}

// 表单对象
const setmealFormRef = ref<FormInstance>()

// 添加菜品
const addSetmeal = () => {
  setmealFormRef.value?.validate(async (valid: any) => {
    if (valid) {
      // 判断当前是更新还是新增
      if (route.query.id) {
        //   更新
      } else {
        // 添加
        //@ts-ignore
        setmealForm.value.setmealDishes = setmealForm.value.setmealDishes.map((item: any) => {
          return {
            copies: item.copies,
            dishId: item.id,
            name: item.name,
            price: item.price
          }
        })

        const res = await addSetmealAPI(setmealForm.value)
        console.log(res)
      }
    }
  })
}

// 取消
const cancel = () => {
  setmealForm.value = {
    name: "",
    categoryId: "",
    price: "",
    description: "",
    image: "",
    setmealDishes: []
  }
  setmealFormRef.value?.resetFields()
  // 跳转到上个页面
  router.back()
}

// 获取套餐详情
const getSetmealDetail = async (id: number) => {
  const res = await getDishDetailAPI(id)
  if (res.code === 1) {
    setmealForm.value = res.data
  }
}
onMounted(() => {
  getCategoryList()
  // 判断当前是否是更新
  if (route.query.id) {
    // 获取菜品详情信息
    getSetmealDetail(parseInt(route.query.id as string))
  }
})
</script>

<style scoped></style>
